<template>
  <div class="child2">


    <div v-if="PaymentDiv">

      <!-- 条件查询 -->
      <el-form ref="form" :model="form" label-width="100%">
        年份<el-select v-model="form.year" placeholder="2020年" clearable class="jiaofei">
          <el-option label="2020" value="2020"></el-option>
          <el-option label="2021" value="2021"></el-option>
          <el-option label="2022" value="2022"></el-option>
        </el-select>

        楼栋<el-select v-model="form.building" placeholder="全部" clearable class="jiaofei">
          <el-option v-for="buildingblock in buildingblockList" :key="buildingblock.id"
            :label="buildingblock.blockNumber" :value="buildingblock.blockNumber"></el-option>
        </el-select>

        单元<el-select v-model="form.unit" placeholder="全部" clearable class="jiaofei">
          <el-option v-for="unit in unitList" :key="unit.id" :label="unit.unitNumber"
            :value="unit.unitNumber"></el-option>

        </el-select>

        楼层<el-select v-model="form.floor" placeholder="全部" clearable class="jiaofei">
          <el-option v-for="floor in floorList" :key="floor.id" :label="floor.floorNumber"
            :value="floor.floorNumber"></el-option>
        </el-select>

        房号<el-select v-model="form.roomNumber" placeholder="全部" clearable class="jiaofei">
          <el-option v-for="room in roomList" :key="room.id" :label="room.roomNumber"
            :value="room.roomNumber"></el-option>
        </el-select>

        缴费状态<el-select v-model="form.paymentStatus" placeholder="已缴费" clearable class="jiaofei">
          <el-option label="已缴费" value="已缴费"></el-option>
          <el-option label="未缴费" value="未缴费"></el-option>

        </el-select>
        欠费月缴<el-select v-model="form.arrearsMonths" placeholder="--请选择--" clearable class="jiaofei">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
        </el-select><br><br>

        户主<el-input v-model="form.headOfHousehold" placeholder="姓名" style="width: 150px; "></el-input>

        手机号码<el-input v-model="form.mobilePhoneNumber" placeholder="请输入" style="width: 150px;"></el-input>

        <!-- 按钮 -->
        <el-button type="primary" @click="findPage()" style="margin-left: 10px;">查询</el-button>
        <el-button type="primary" @click="Reminders()">催缴</el-button>
        <el-button type="success" @click="toAdd()">导出</el-button>
        <el-button type="danger" @click="toplmonry()">批量作废账单</el-button>
        <el-button type="primary" @click="ZuoFei()">作废账单记录</el-button>
      </el-form><br><br>

      <!-- 盒子 嵌套表格    关于金额表格-->
      <div class="box">
        <el-table :data="summaryTableData" style="width: 100%;">
        <el-table-column prop="totalDue" label="应收总额(元)">
        </el-table-column>
        <el-table-column prop="actualReceived" label="实收总额(元)">
        </el-table-column>
        <el-table-column prop="unpaidTotal" label="未收总额(元)">
        </el-table-column>
        <el-table-column prop="prepaidBalance" label="预存总余额(元)">
        </el-table-column>
      </el-table>
      </div>


      <!-- 缴费情况 表格展示 -->
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
      </el-table-column>
  
      <el-table-column prop="building" label="楼栋">
      </el-table-column>
      <el-table-column prop="unit" label="单元">
      </el-table-column>
      <el-table-column prop="floor" label="楼层">
      </el-table-column>
      <el-table-column prop="roomNumber" label="房间号">
      </el-table-column>
      <el-table-column prop="headOfHousehold" label="户主">
      </el-table-column>
      <el-table-column prop="mobilePhoneNumber" label="手机号">
      </el-table-column>
      <el-table-column prop="annualDueTotal" label="年度应收总额(元)">
      </el-table-column>
      <el-table-column prop="arrearsMonths" label="欠费月缴">
      </el-table-column>
      <el-table-column prop="unpaidBillCount" label="未缴账单数量">
      </el-table-column>
      <el-table-column prop="annualUnpaidTotal" label="年度未缴总额(元)">
      </el-table-column>
        <el-table-column label="操作" width="300px">
          <template>
            <el-button @click="Prexisted()" type="text">预存</el-button>
            <el-button @click="Detail()" type="text">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[2, 4, 6, 8]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


      <!-- 按钮 预存 弹出页面 -->
      <el-dialog title="预存" :visible.sync="Dialog">
        <el-form :model="pojo">
          类型 <el-select v-model="pojo.region" placeholder="预存" style="width: 500px;">
            <el-option label="预存" value="0"></el-option>
            <el-option label="退费" value="1"></el-option>
          </el-select>
          <br><br>
          预存金额(元) <el-input v-model="pojo.name" autocomplete="off" style="width: 500px;"></el-input>
          <br><br>
          支付方式 <el-select v-model="pojo.fangshi" placeholder="请选择支付方式" style="width: 500px;">
            <el-option label="现金" value="0"></el-option>
            <el-option label="POS 刷卡" value="1"></el-option>
            <el-option label="微信扫码" value="2"></el-option>
            <el-option label="支付宝扫码" value="3"></el-option>
            <el-option label="银行转账" value="4"></el-option>
          </el-select>
          <br><br>
          <el-form-item label="活动形式">
            <el-input type="textarea" v-model="pojo.desc" style="width: 500px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="Dialog = false">取 消</el-button>
          <el-button type="primary" @click="Dialog = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>



    <!-- 缴费情况 表操作 详情跳转页面 -->
    <div v-if="DetailDiv">

      <div style="width: 100%;height: 60px;">
        <!-- 根据小区具体房间号   业主 姓名   手机号码 -->
        <el-form :model="pojo" style="margin-right: 1300px;">
          小区单元 : {{ pojo.id }}
          户主 : {{ pojo.id }}
          手机号 : {{ pojo.id }}
          <el-button @click="Out()">返回</el-button>
        </el-form>

        <!-- 缴纳情况页面 查询 以及 表展示 表操作 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">

          <!-- 二层标签页 -->
          <el-tab-pane label="缴纳情况" v-if="qingkuang">
            <!-- 条件查询 -->
            <el-form ref="form" :model="form" width="100%" style="margin-right: 600px;">

              年份选择<el-select v-model="form.gshenhe" placeholder="2020年" clearable class="jiaofei">
                <el-option label="2020年" value="0"></el-option>
                <el-option label="2021年" value="1"></el-option>
                <el-option label="2022年" value="2"></el-option>
              </el-select>
              续费项<el-select v-model="form.gshenhe" placeholder="全部" clearable class="jiaofei">
                <el-option label="物业管理费" value="0"></el-option>
                <el-option label="垃圾费" value="1"></el-option>

              </el-select>
              缴纳状态<el-select v-model="form.gshenhe" placeholder="全部" clearable class="jiaofei">
                <el-option label="已缴纳" value="0"></el-option>
                <el-option label="未缴纳" value="1"></el-option>
              </el-select>
              <!-- 按钮 -->
              <el-button type="primary" @click="findPage" style="margin-left: 10px;">查询</el-button>
              <el-button type="primary" @click="toxxjf()">线下缴费</el-button>
              <el-button type="success" @click="Offset()">冲抵</el-button>
              <el-button type="danger" @click="Export">导出</el-button>
            </el-form><br><br>

            <!-- 缴纳情况 金额表 展示 -->
            <div class="box">
              <el-table :data="tableData" style="width: 100%;">
                <el-table-column prop="money1" label="应收总额(元)">
                </el-table-column>
                <el-table-column prop="money2" label="实收总额(元)">
                </el-table-column>
                <el-table-column prop="money3" label="优惠总额(元)">
                </el-table-column>
                <el-table-column prop="money4" label="未收总额(元)">
                </el-table-column>
                <el-table-column prop="money5" label="预存总余额(元)">
                </el-table-column>
              </el-table>
            </div>

            <!-- 缴纳情况表 展示 -->
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column prop="id" label="月份">
              </el-table-column>
              <el-table-column prop="gid" label="缴费项">
              </el-table-column>
              <el-table-column prop="gname" label="应收(元)">
              </el-table-column>
              <el-table-column prop="gdesc" label="优惠(元)">
              </el-table-column>
              <el-table-column prop="gnum" label="实收(元)">
              </el-table-column>
              <el-table-column prop="gprice" label="单价">
              </el-table-column>
              <el-table-column prop="gmoney" label="年度应收总额(元)">
              </el-table-column>
              <el-table-column prop="gstatus" label="缴纳状态">
              </el-table-column>
              <el-table-column label="操作" width="300px">
                <template slot-scope="scope">
                  <el-button @click="voidBill(scope.row.id)" type="text"><b style="color: red">作废</b></el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
              :page-sizes="[2, 4, 6, 8]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>






          <!-- 冲抵弹出框 -->
          <!-- 冲抵弹出框 -->
          <el-dialog title="冲抵" :visible.sync="dialogTableVisibleOffset" append-to-body width="1000px">
            <span class="xf">幸福社区3栋5单元12层03李明(户主)</span>
            <!-- 表单上传凭证 -->
            <el-form ref="form" :model="formsc" label-width="80px" style="margin-top: 10px;">

              <span style="color: blue;">可用预存余额:{{ form.money }}</span>
              <br> <br>
              <span>冲抵账单</span>
              <el-table :data="tableData" border>
                <el-table-column prop="yue" label="月份">
                </el-table-column>
                <el-table-column prop="fx" label="费项">
                </el-table-column>
                <el-table-column prop="zdzq" label="账单周期">
                </el-table-column>
                <el-table-column prop="sfzq" label="收费周期">
                </el-table-column>
                <el-table-column prop="price" label="单价">
                </el-table-column>
                <el-table-column prop="numm" label="数量">
                </el-table-column>
                <el-table-column prop="moneys" label="总计（元）">
                </el-table-column>
              </el-table>
              <hr style="margin-top: 20px;border: 1px solid #e3e3e3;">


              <el-form-item prop="zffs" :rules="[{ required: true, message: '请选择支付方式', trigger: 'change' }]">
                <template>
                  <span style="color: red">*</span>折扣
                </template>

                <el-input v-model="form.name" style="width: 200px;"></el-input>折
                <br>
                <span>示例:设置折扣8.5折，则折后实收金额=应收总额*8.5*10%,折后金额保留两位小数(四舍五入);</span>
              </el-form-item>

              <div style="text-align: right;">
                <span>应收金额（元）:90 优惠金额（元）:13.5 实收金额（元）： <span style="color: red;">76</span> </span>
                <el-button type="primary" style="margin-left: 20px;width: 120px;" @click="tofk()">付款</el-button>
              </div>
            </el-form>
          </el-dialog>






          <!-- 线下缴费弹出框 -->
          <!-- 线下缴费弹出框 -->
          <el-dialog title="线下缴费" :visible.sync="dialogTableVisiblexxjf" append-to-body width="1000px">
            <span class="xf">幸福社区3栋5单元12层03李明(户主)</span>
            <!-- 表单上传凭证 -->
            <el-form ref="form" :model="formsc" label-width="80px" style="margin-top: 10px;">
              <el-form-item label="上传凭证">
                <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>


              <el-table :data="tableData" border>
                <el-table-column prop="yue" label="月份">
                </el-table-column>
                <el-table-column prop="fx" label="费项">
                </el-table-column>
                <el-table-column prop="zdzq" label="账单周期">
                </el-table-column>
                <el-table-column prop="sfzq" label="收费周期">
                </el-table-column>
                <el-table-column prop="price" label="单价">
                </el-table-column>
                <el-table-column prop="numm" label="数量">
                </el-table-column>
                <el-table-column prop="moneys" label="总计（元）">
                </el-table-column>
              </el-table>
              <hr style="margin-top: 20px;border: 1px solid #e3e3e3;">


              <el-form-item prop="zffs" :rules="[{ required: true, message: '请选择支付方式', trigger: 'change' }]">
                <template>
                  <span style="color: red">*</span>支付方式
                </template>
                <el-select v-model="formsc.zffs" placeholder="请选择支付方式">
                  <el-option label="现金" value="1"></el-option>
                  <el-option label="微信" value="2"></el-option>
                  <el-option label="支付宝" value="3"></el-option>
                </el-select>
              </el-form-item>

              <div style="text-align: right;">
                <span>应收金额（元）:90 优惠金额（元）:13.5 实收金额（元）： <span style="color: red;">76</span> </span>
                <el-button type="primary" style="margin-left: 20px;width: 120px;" @click="tofk()">付款</el-button>
              </div>
            </el-form>
          </el-dialog>




          <!-- 付款按钮弹出框 -->
          <el-dialog title="付款确认" :visible.sync="dialogTableVisiblefk" append-to-body width="1000px">
            <el-form ref="form" :model="formfk" label-width="80px" style="margin-top: 10px;">
              <hr>
              <h3>确定进行线下付款处理？</h3>

              <el-input type="textarea" :rows="4" placeholder="备注(100字内)" v-model="formfk.textarea">
              </el-input>

              <el-checkbox v-model="formfk.dysj">立即打印收据</el-checkbox>
              <div style="text-align: right;">
                <el-button style="width: 120px;" @click="dialogTableVisiblefk = false">取 消</el-button>
                <!-- <el-button style="width: 120px;" type="primary" @click="dialogTableVisiblefk = false">确 定</el-button> -->
                <el-button type="primary" style="width: 120px;" @click="ffqr(formfk.dysj)">
                  确定
                </el-button>
              </div>
            </el-form>
          </el-dialog>





          <!-- 缴费开据弹出框 -->
          <el-dialog title="缴费开据" append-to-body :visible.sync="dialogTableVisiblejfkj">
            <p style="margin-left: 10px">已选交易</p>

            <div class="top" style="margin-bottom: 30px">

              <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="date" label="支付时间" width="180"></el-table-column>
                <el-table-column prop="name" label="账单号" width="180"></el-table-column>
                <el-table-column prop="name" label="交易流水号" width="180"></el-table-column>
                <el-table-column prop="address" label="实付金额（元）"></el-table-column>
                <el-table-column prop="address" label="缴费平台"></el-table-column>
                <el-table-column prop="address" label="缴费渠道"></el-table-column>
                <el-table-column prop="address" label="支付状态"></el-table-column>
              </el-table>

            </div>

            <hr>

            <div class="bottom" style="margin-top: 30px;width: 880.5px;">

              <el-form ref="form" :model="form" label-width="80px" style="width:880.5px;">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="收据编号">
                      <el-input v-model="form.name" class="width-input"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="房间地址">
                      <el-input v-model="form.name" class="width-input"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="收据抬头">
                      <el-input v-model="form.name" class="width-input"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="客户">
                      <el-input v-model="form.name" class="width-input"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="12">
                    <el-form-item label="开据人">
                      <el-input v-model="form.name" class="width-input"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备注">
                      <el-input class="width-input" type="textarea" :rows="6" :cols="30" placeholder="请输入(0/100)"
                        v-model="textarea">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item style="text-align: right;">
                  <el-button @click="dialogTableVisiblejfkj = false">取消</el-button>
                  <el-button type="primary" @click="Preview">打印预览</el-button>
                </el-form-item>
              </el-form>

            </div>

          </el-dialog>


          <el-dialog title="开据预览" :visible.sync="onDialogClose" width="60%">
            <h2 class="receipt-title">大海物业公司收据</h2>
            <div class="container">
              <span>资产名称:幸福阳光小区1栋1单元1层101</span>
              <span>No.SJ20220912345678</span>
            </div>
            <div class="container">
              <span>客户：张三</span>
              <span>收款日期:2022-09-09 12:23:23</span>
            </div>
            <el-table :data="payData" :span-method="arraySpanMethod" border style="width: 100%;color: black">
              <el-table-column prop="project" label="收费项目" width="180"></el-table-column>
              <el-table-column prop="fytime" label="费用时间"></el-table-column>
              <el-table-column prop="number" label="数量"></el-table-column>
              <el-table-column prop="price" label="单价"></el-table-column>
              <el-table-column prop="yingshou" label="应收"></el-table-column>
              <el-table-column prop="quantity" label="优惠"></el-table-column>
              <el-table-column prop="shishou" label="实收"></el-table-column>
            </el-table>
            <div class="under">
              <span>财务主管记账：出纳：审核：经办：</span>
              <span>收款单位 (盖章)</span>
            </div>
            <br />
            <div class="under">
              <span>开据人：李四 打印次数: 第1次打印</span>
              <span>若有疑问请到物业中心查询,谢谢！</span>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="onDialogClose = false">打印</el-button>
            </span>
          </el-dialog>






          <!-- 详情 交易记录标签页 -->
          <el-tab-pane label="交易记录" name="second">
            <!-- <el-button @click="Details()" type="text" >明细</el-button> -->
            <!-- 条件查询 -->
            <el-form ref="form" :model="form" width="100%" style="margin-right: 200px;">
              年份选择<el-select v-model="form.gshenhe" placeholder="2020年" clearable class="jiaofei">
                <el-option label="2020年" value="0"></el-option>
                <el-option label="2021年" value="1"></el-option>
                <el-option label="2022年" value="2"></el-option>
              </el-select>

              月份<el-select v-model="form.gshenhe" placeholder="全部" clearable class="jiaofei">
                <el-option label="1月" value="0"></el-option>
                <el-option label="2月" value="1"></el-option>
                <el-option label="3月" value="2"></el-option>
              </el-select>

              缴费渠道<el-select v-model="form.gshenhe" placeholder="全部" clearable class="jiaofei">
                <el-option label="微信(线上)" value="0"></el-option>
                <el-option label="线下" value="1"></el-option>
                <el-option label="线下冲抵" value="2"></el-option>
                <el-option label="预存" value="3"></el-option>
              </el-select>

              缴费平台<el-select v-model="form.gshenhe" placeholder="全部" clearable class="jiaofei">
                <el-option label="微信支付" value="0"></el-option>
                <el-option label="支付宝支付" value="1"></el-option>
              </el-select>

              支付状态<el-select v-model="form.gshenhe" placeholder="全部" clearable class="jiaofei">
                <el-option label="微信支付" value="0"></el-option>
                <el-option label="支付宝支付" value="1"></el-option>
              </el-select>

              账单号<el-input v-model="form.name" placeholder="请输入" style="width: 200px;"></el-input>
              <br><br>
              <!-- 按钮 -->
              <el-button type="primary" @click="findPage">查询</el-button>
              <el-button type="danger" @click="toAdd()">导出</el-button>
            </el-form><br><br>

            <!-- 交易记录表格 -->
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column prop="time" label="支付时间">
              </el-table-column>
              <el-table-column prop="gid" label="账单号">
              </el-table-column>
              <el-table-column prop="gliu" label="交易流水号">
              </el-table-column>
              <el-table-column prop="gmoney" label="实付金额(元)">
              </el-table-column>
              <el-table-column prop="gping" label="缴费平台">
              </el-table-column>
              <el-table-column prop="gqu" label="缴费渠道">
              </el-table-column>
              <el-table-column prop="gstatus" label="支付状态">
              </el-table-column>
              <el-table-column label="操作" width="300px">
                <template slot-scope="scope">
                  <el-button @click="Details(scope.row)" type="text">明细</el-button>
                  <el-button @click="Issuereceipts()" type="text">开收据</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
              :page-sizes="[7, 7, 7, 7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-dialog title="明细" :visible.sync="JyMxDialog">

      <!-- 盒子 -->
      <div style="width: 100%;height:120px;">

        <el-form ref="form" :model="pojo01" label-width="400px">
          <span style="margin-right: 150px;"> 账单号:{{ pojo01.zhangdan }} </span>
          <span style="margin-right: 150px;">账单人:{{ pojo01.name }} </span>
          <span style="margin-right: 150px;">房屋:{{ pojo01.room }} </span><br><br>
          <span style="margin-right: 150px; ">缴费渠道:{{ pojo01.qudao }} </span>
          <span style="margin-right: 150px;">付款时间:{{ pojo01.time }} </span>
          <span style="margin-right: 150px;"> 订单状态:{{ pojo01.status }} </span>
        </el-form>
      </div>


      <!-- 明细表格 -->
      <el-table :data="tableData" border style="width: 100%">

        <el-table-column prop="gyue" label="月份">
        </el-table-column>
        <el-table-column prop="gid" label="缴费项">
        </el-table-column>
        <el-table-column prop="gname" label="账单周期">
        </el-table-column>
        <el-table-column prop="gdesc" label="收费周期">
        </el-table-column>
        <el-table-column prop="gprice" label="单价">
        </el-table-column>
        <el-table-column prop="gnum" label="数量">
        </el-table-column>
        <el-table-column prop="gqian" label="应付总计(元)">
        </el-table-column>
        <el-table-column prop="gstatus" label="优惠(元)">
        </el-table-column>
        <el-table-column prop="gyuan" label="实付(元)">
        </el-table-column>
      </el-table>
      <span style="margin-right: 650px;">交易流水号:000022020152525586525855</span>

    </el-dialog>

    <!-- 批量作废账单弹出框 -->
    <el-dialog :title="title" :visible.sync="dialogTableVisibleplmoney" width="1000px" append-to-body>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <span style="line-height: 40px;margin-left: 8px;"><span style="color: red;">*</span>选择房屋</span>
            <el-tree :data="data" show-checkbox node-key="id" :props="defaultProps" style="background-color: #f2f2f2;">
            </el-tree>
          </div>
        </el-col>
        <el-col :span="18">

          <div class="grid-content bg-purple">

            <span style="line-height: 40px;margin-left: 10px;"><span style="color: red;">*</span>选择费项</span>
            <br>
            <span style="color: red;margin-left: 18px;line-height: 30px;">注意！将作废未缴纳账单</span>
            <el-table ref="multipleTable" :data="tableData" height="420" border style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="80" align="center">
              </el-table-column>
              <el-table-column prop="date" label="物业管理费">
              </el-table-column>
              <el-table-column prop="name" label="单价">
              </el-table-column>
              <el-table-column prop="address" label="公式">
              </el-table-column>
            </el-table>

          </div>

        </el-col>
      </el-row>
      <div style="text-align: right;margin-right: 50px;margin-top: 20px;">
        <el-button @click="dialogTableVisibleplmoney = false">取 消</el-button>
        <el-button type="primary" @click="dialogTableVisibleplmoney = false">作废</el-button>
      </div>
    </el-dialog>






    <!-- 作废账单记录跳转页面 -->
    <div v-if="VoidDiv">

      <!-- 返回按钮 -->
      <el-button @click="ZuoFeiOut()" style="margin-bottom: 10px;">返回</el-button>
      <!-- 条件查询 -->
      <el-form ref="form" :model="form" width="100%" style="margin-right: 200px;">
        年份<el-select v-model="form.gshenhe" placeholder="2020年" clearable class="jiaofei">
          <el-option label="2020年" value="0"></el-option>
          <el-option label="2021年" value="1"></el-option>
          <el-option label="2022年" value="2"></el-option>
        </el-select>

        楼栋<el-select v-model="form.gshenhe" placeholder="全部" clearable class="jiaofei">
          <el-option label="1栋" value="0"></el-option>
          <el-option label="2栋" value="1"></el-option>
          <el-option label="3栋" value="2"></el-option>
        </el-select>

        单元<el-select v-model="form.gshenhe" placeholder="全部" clearable class="jiaofei">
          <el-option label="1单元" value="0"></el-option>
          <el-option label="2单元" value="1"></el-option>
          <el-option label="3单元" value="2"></el-option>
        </el-select>
        房号<el-select v-model="form.gshenhe" placeholder="全部" clearable class="jiaofei">
          <el-option label="101" value="0"></el-option>
          <el-option label="102" value="1"></el-option>
          <el-option label="103" value="2"></el-option>
        </el-select>


        户主<el-input v-model="form.name" placeholder="请输入" style="width: 200px;"></el-input>

        手机号码<el-input v-model="form.name" placeholder="请输入" style="width: 200px;"></el-input>

        <!-- 按钮 -->
        <el-button type="primary" @click="findPage">查询</el-button>

      </el-form><br><br>


      <!-- 缴费情况 作废账单总额（元） -->
      <div style=" background-color: aliceblue; width: 100%;height: 70px;margin-bottom: 10px;">
        <span>作废账单总额(元)</span><br><br>
        <span>144.11</span>
      </div>

      <el-table :data="JiaoFeiData3" border style="width: 100%">

        <el-table-column prop="gyue" label="月份">
        </el-table-column>
        <el-table-column prop="gid" label="缴费项">
        </el-table-column>
        <el-table-column prop="gname" label="账单周期">
        </el-table-column>
        <el-table-column prop="gdesc" label="收费周期">
        </el-table-column>
        <el-table-column prop="gprice" label="单价">
        </el-table-column>
        <el-table-column prop="gnum" label="数量">
        </el-table-column>
        <el-table-column prop="gqian" label="应付总计(元)">
        </el-table-column>
        <el-table-column prop="gstatus" label="优惠(元)">
        </el-table-column>
        <el-table-column prop="gyuan" label="实付(元)">
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[7, 7, 7, 7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>


  </div>
</template>


<script>

import { getPaymentList, findBuildingblock, findUnit, findFloor, findRoom ,RemindersAPI} from '@/api/payment/payment'

export default {
  data() {
    return {
      tableData: [],
      pageNum: 1, // 初始化 pageNum
      pageSize: 2, // 初始化 pageSize
      form: {}, // 初始化 form
      total: 0,

      // 预存页面
      Dialog: false,
      pojo: {},
      // 缴费情况  页面大盒子
      PaymentDiv: true,
      // 缴费情况  详情页面 大盒子
      DetailDiv: false,
      // 缴纳情况设置成true
      qingkuang: true,
      // 缴纳情况表展示


      VoidDiv: false,
      // 交易记录明细弹出窗
      JyMxDialog: false,
      // 批量作废弹出窗
      dialogTableVisibleplmoney: false,
      title: "",
      pojo01: {},
      selectedRow: null, // 选中的行数据
      // 收据弹出窗
      onDialogClose: false,
      // 收据页面
      payData: [],
      //冲抵表单
      dialogTableVisibleOffset: false,
      //缴费开据弹出框
      dialogTableVisiblejfkj: false,
      //付款页面表单
      formfk: {},
      // 付款确认弹出框备注
      textarea: '',
      //付款按钮弹出框
      dialogTableVisiblefk: false,
      // 线下缴费弹出框
      dialogTableVisiblexxjf: false,
      //  表单数据 图片上传
      formsc: {},
      imageUrl: '',
      // 楼栋动态查询
      buildingblockList: [],
      // 单元动态查询
      unitList: [],
      // 楼层动态查询
      floorList: [],
      // 房号动态查询
      roomList: [],
      ids: [],
      allList: [],

      prepaidBalance: 0,

      summaryTableData: [
        { totalDue: 0, actualReceived: 0, unpaidTotal: 0, prepaidBalance: 0 }
      ]

    };
  },
  watch: {
    tableData: {
      handler: function(newVal, oldVal) {
        this.calculateSummary();
      },
      deep: true
    }
  },
  mounted() {
    this.calculateSummary();
  },
  methods: {


    // 催缴功能
// 催缴功能
Reminders() {
    if (this.allList.length > 0) {
        this.$confirm('此操作将提示缴费, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            // 在确认继续后，获取ids
            this.ids = this.allList.map(item => item.id);
            // 调用新的API方法
        
            RemindersAPI(this.ids).then(res => {
                if (res == 0) {
                    this.$message.success("催缴成功！");
                    this.findPage();
                }
            }).catch(error => {
                console.error('催缴失败:', error);
                this.$message.error("催缴失败，请稍后重试！");
            });
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消催缴'
            });
        });
    } else {
        this.$message({
            type: 'info',
            message: '请勾选欠费房屋'
        });
    }
},

// 修改handleSelectionChange以收集选择的项
handleSelectionChange(val) {
    this.allList = val;
},



 
    calculateSummary() {
      let totalDue = 0;
      let annualDueTotalSum = 0;
      let annualUnpaidTotalSum = 0;
      this.tableData.forEach(row => {
        totalDue += row.annualDueTotal;
        annualDueTotalSum += row.annualDueTotal;
        annualUnpaidTotalSum += row.annualUnpaidTotal;
      });

      // 计算实收总额
      const actualReceived = annualDueTotalSum - annualUnpaidTotalSum;

      // 更新汇总信息
      this.summaryTableData[0].totalDue = totalDue;
      this.summaryTableData[0].actualReceived = actualReceived;
      this.summaryTableData[0].unpaidTotal = annualUnpaidTotalSum;
    },
 


    // 房号动态查询
    findRoom() {
      findRoom().then(response => {
        this.roomList = response;
      });
    },
    // 楼层动态查询
    findFloor() {
      findFloor().then(response => {
        this.floorList = response;
      });
    },

    // 单元动态查询
    findUnit() {
      findUnit().then(response => {
        this.unitList = response;
      });
    },
    // 楼栋动态查询
    findBuildingblock() {
      findBuildingblock().then(response => {
        this.buildingblockList = response;
      });
    },

    // 分页查询
    findPage() {
      getPaymentList(this.pageNum, this.pageSize, this.form).then(res => {
        this.tableData = res.records;
        this.total = res.total;
        this.calculateSummary();
        console.log(res.total);
      })
    },

    // 缴费情况
    JiaoFei() {
      this.PaymentDiv = true
      this.DetailDiv = false
      this.VoidDiv = false
    },

    // 缴纳情况
    JiaoNq() {
      this.PaymentDiv = false
      this.DetailDiv = false
      this.VoidDiv = false
    },

    Preview() {
      this.onDialogClose = true;
      this.dialogTableVisiblejfkj = false;
    },
    // 表操作开收据
    Issuereceipts() {
      this.dialogTableVisiblejfkj = true;
    },
    // 冲抵按钮
    Offset() {
      this.dialogTableVisibleOffset = true;

    },

    //服务确认
    ffqr(dysj) {
      if (dysj) {
        this.dialogTableVisiblefk = false;
        this.dialogTableVisiblejfkj = true;
      } else {
        const loading = this.$loading({
          lock: true,
          text: '操作成功',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 600);
        this.dialogTableVisiblefk = false;
      }

    },

    // 付款
    tofk() {
      this.dialogTableVisiblexxjf = false;
      this.dialogTableVisibleOffset = false;
      this.dialogTableVisiblefk = true;
    },
    // 线下缴费
    toxxjf() {
      this.dialogTableVisiblexxjf = true;
    },
    //上传凭证
    handleAvatarSuccess(res, file) {
      this.imageUrl = res
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    // 表操作作废按钮
    voidBill(billId) {
      this.$confirm('确认作废此账单？ 作废后，该笔费用将不能开据、统计费用，作废后将不可恢复，谨慎操作', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定按钮的操作
        this.$message.success('作废成功!');
      }).catch(() => {
        // 点击取消按钮的操作
        this.$message.info('已取消操作');
      });
    },
   
    // 批量作废账单按钮
    toplmonry() {
      this.dialogTableVisibleplmoney = true;
      this.title = "批量删除费用";
    },

    Details(row) {
      this.JyMxDialog = true;
    },


    // 作废账单记录按钮
    ZuoFei() {
      this.PaymentDiv = false;
      this.VoidDiv = true;
    },
    // 预存
    Prexisted() {
      this.Dialog = true;
      this.pojo={};

    },
    // 缴费情况 表操作 详情
    Detail() {
      this.PaymentDiv = false;
      this.DetailDiv = true;
    },
    // 作废账单记录返回按钮
    ZuoFeiOut() {
      this.PaymentDiv = true;
      this.VoidDiv = false;
    },
    //缴费情况标签页 返回按钮
    Out() {
      this.PaymentDiv = true;
      this.DetailDiv = false;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.findPage();
    }

  },
  //在实例化之后

  created() {
    this.findPage();
    this.findBuildingblock();
    this.findUnit();
    this.findFloor();
    this.findRoom();
  },
};
</script>

<style>
.margin {
  width: 200px;
}

.jiaofei {
  width: 150px;
}

.box {
  margin-top: 1px;
  height: 100px;
  width: 100%;
}

.receipt-title {
  text-align: center;
  font-size: 30px;
  color: black;
}

.container {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  color: black;
}

.under {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  color: black;
}
</style>
